<template>
  <div class="dv-water-polo" :class="{ 'is-dark': isDark }">
    <svg :width="size" :height="size" viewBox="0 0 100 100">
      <defs>
        <linearGradient :id="`water-gradient-${uid}`" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" :stop-color="color" stop-opacity="0.8" />
          <stop offset="100%" :stop-color="color" stop-opacity="0.4" />
        </linearGradient>
        
        <clipPath :id="`water-clip-${uid}`">
          <circle cx="50" cy="50" r="48" />
        </clipPath>
      </defs>
      
      <!-- 外圈 -->
      <circle
        cx="50"
        cy="50"
        r="49"
        fill="none"
        :stroke="color"
        :stroke-width="isDark ? 2 : 3"
        :opacity="isDark ? 0.3 : 0.5"
      />
      
      <!-- 水波 -->
      <g :clip-path="`url(#water-clip-${uid})`">
        <path
          :d="wavePath"
          :fill="`url(#water-gradient-${uid})`"
        >
          <animateTransform
            attributeName="transform"
            type="translate"
            :from="`${waveWidth} 0`"
            to="0 0"
            dur="2s"
            repeatCount="indefinite"
          />
        </path>
        <path
          :d="wavePath"
          :fill="`url(#water-gradient-${uid})`"
          opacity="0.5"
        >
          <animateTransform
            attributeName="transform"
            type="translate"
            :from="`${waveWidth * 1.5} 0`"
            to="0 0"
            dur="2s"
            repeatCount="indefinite"
          />
        </path>
      </g>
      
      <!-- 百分比文字 -->
      <text
        x="50"
        y="50"
        text-anchor="middle"
        dominant-baseline="middle"
        :fill="textColor"
        font-size="10"
        font-weight="bold"
        class="percentage-text"
      >
        {{ displayValue }}%
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  value: number
  size?: number
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 120
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const currentValue = ref(0)
const uid = ref(`water-${Math.random().toString(36).substr(2, 9)}`)
const waveWidth = 100

const color = computed(() => {
  if (props.color) return props.color
  return isDark.value ? '#00d4ff' : '#409eff'
})

const textColor = computed(() => isDark.value ? '#fff' : '#303133')

const displayValue = computed(() => Math.round(currentValue.value))

const wavePath = computed(() => {
  const waveHeight = 5
  const y = 100 - currentValue.value
  
  let path = `M -${waveWidth} ${y}`
  for (let i = -waveWidth; i <= waveWidth * 2; i += 10) {
    const wave = Math.sin((i / waveWidth) * Math.PI * 4) * waveHeight
    path += ` L ${i} ${y + wave}`
  }
  path += ` L ${waveWidth * 2} 100 L -${waveWidth} 100 Z`
  return path
})

watch(() => props.value, (newVal) => {
  const start = currentValue.value
  const target = Math.min(Math.max(newVal, 0), 100)
  const duration = 1000
  const startTime = Date.now()
  
  const animate = () => {
    const now = Date.now()
    const progress = Math.min((now - startTime) / duration, 1)
    const easeOut = 1 - Math.pow(1 - progress, 3)
    
    currentValue.value = start + (target - start) * easeOut
    
    if (progress < 1) {
      requestAnimationFrame(animate)
    }
  }
  
  requestAnimationFrame(animate)
}, { immediate: true })
</script>

<style lang="scss" scoped>
.dv-water-polo {
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
  
  svg {
    display: block;
    
    .percentage-text {
      font-family: 'DS-Digital', 'Courier New', monospace;
      font-weight: bold;
    }
    
    circle {
      transition: all 0.3s;
    }
  }
  
  &.is-dark {
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
    
    .percentage-text {
      text-shadow: 0 0 10px currentColor;
    }
  }
}
</style>
